<template>
  <el-card class="social-post" :body-style="{ padding: '0' }">
    <!-- 用户信息头部 -->
    <div class="post-header">
      <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
      <div class="user-info">
        <span class="username">王大锤</span>
        <span class="post-meta">35分钟前 · 腾讯 技术开发</span>
      </div>
    </div>

    <!-- 帖子正文 -->
    <div class="post-content">
      <div class="tags">
        <el-tag size="small" type="info">#网易</el-tag>
        <el-tag size="small" type="info">#离大谱</el-tag>
        <el-tag size="small" type="info">#人间真实</el-tag>
        <el-tag size="small" type="info">#听我狡辩</el-tag>
        <el-tag size="small" type="info">#社畜日常</el-tag>
      </div>
      
      <h3 class="post-title">别去深圳网易</h3>
      
      <p class="post-text">
        天天各种没有意义的会，跟自己的关系几乎没有，各种群都在拉会对齐压力很大，
        感觉字节这边确实是把人当干电池，实习生的活很多，主要也是因为人力缺乏，
        实习生当正职，正职当1.5个人以上
      </p>
      
      <!-- 图片区域 (模拟6张相同图片) -->
      <!-- <div class="post-images">
        <el-image 
          v-for="i in 6" :key="i"
          style="width: 120px; height: 120px; margin-right: 8px;"
          :src="'https://via.placeholder.com/120x120/eee/999?text=商品图' + i"
          fit="cover"
        />
      </div> -->
    </div>

    <!-- 互动数据 -->
    <!-- <div class="post-stats">
      <span class="stat-item">4388</span>
      <span class="stat-item">4388</span>
      <span class="stat-item">4388</span>
    </div> -->
  </el-card>
</template>

<style scoped>
.social-post {
  width: 100%;
  /* max-width: 600px; */
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.post-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.user-info {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  font-size: 15px;
}

.post-meta {
  font-size: 12px;
  color: #999;
}

.post-content {
  padding: 12px 16px;
}

.tags {
  margin-bottom: 8px;
}

.tags .el-tag {
  margin-right: 6px;
  margin-bottom: 6px;
}

.post-title {
  margin: 8px 0 12px;
  font-size: 18px;
  font-weight: 600;
}

.post-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
}

.post-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}

.post-stats {
  display: flex;
  justify-content: space-around;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  color: #666;
  font-size: 14px;
}

.stat-item {
  flex: 1;
  text-align: center;
}
</style>